<template>
  <div class="bimfacemain">
    <div class="header">
    </div>
    <div class="content" ref="model">
    </div>
    <div class="mask"></div>
    <div class="left">
      <div class="bar">
        <span class="title">监控设备</span>
        <span class="info">MONITORING EQUIPMENT</span>
      </div>
      <div class="monitor">
        <div class="img">
        </div>
        <div class="info">
          <div>
            <div class="h6">工作中</div>
            <div class="value" style="color: rgba(255,255,255,1);">50</div>
          </div>
          <div>
            <div class="h6">故障</div>
            <div class="value" style="color: orange">2</div>
          </div>
        </div>
      </div>
      <div class="bar">
        <span class="title">今日人流量</span>
        <span class="info">MONITORING EQUIPMENT</span>
      </div>
      <div class="myEcharts" ref="echarts"></div>
      <div class="bar">
        <span class="title">门禁工作情况</span>
        <span class="info">ACCESS CONTROL WORK</span>
      </div>
      <div class="doorMonitor">
        <div class="img">
        </div>
        <div class="info">
          <div>
            <div class="h6">总数量</div>
            <div class="value" style="color: rgba(255,255,255,1);">8</div>
          </div>
          <div>
            <div class="h6">故障</div>
            <div class="value" style="color: orange">2</div>
          </div>
        </div>
      </div>
      <div class="bar">
        <span class="title">人群分布</span>
        <span class="info">POPULATION DISTRIBUTION</span>
      </div>
      <div class="person">
        <div class="personList">
          <div class="personItem">
            <div class="title">总人数</div>
            <div class="value">2000人</div>
          </div>
          <div class="personItem">
            <div class="title">员工人数</div>
            <div class="value">1950人</div>
          </div>
          <div class="personItem">
            <div class="title">外方人员</div>
            <div class="value">50人</div>
          </div>
        </div>
        <div class="percentage">
          <div class="percentageLeft">
            <div ref="percentageManEcharts" class="echartsDiv"></div>
          </div>
          <div class="percentageRight">
            <div class="ageInfo">
              <div class="age">
                <p style="color: rgba(255,255,255,1)">18-25岁</p>
                <p style="color: rgb(247, 78, 71)">50%</p>
              </div>
              <div class="processOut">
                <div class="process" style="width: 50%;background: rgb(247, 78, 71);"></div>
              </div>
            </div>
            <div class="ageInfo">
              <div class="age">
                <p style="color: rgba(255,255,255,1)">25-35岁</p>
                <p style="color: rgb(247, 141, 71)">20%</p>
              </div>
              <div class="processOut">
                <div class="process" style="width: 20%;background: rgb(247, 141, 71);"></div>
              </div>
            </div>
            <div class="ageInfo">
              <div class="age">
                <p style="color: rgba(255,255,255,1)">35-45岁</p>
                <p style="color: rgb(20, 165, 255)">15%</p>
              </div>
              <div class="processOut">
                <div class="process" style="width: 15%;background: rgb(20, 165, 255);"></div>
              </div>
            </div>
            <div class="ageInfo">
              <div class="age">
                <p style="color: rgba(255,255,255,1)">45-60岁</p>
                <p style="color: rgb(20, 165, 255)">10%</p>
              </div>
              <div class="processOut">
                <div class="process" style="width: 10%;background: rgb(20, 165, 255);"></div>
              </div>
            </div>
            <div class="ageInfo">
              <div class="age">
                <p style="color: rgba(255,255,255,1)">60岁以上</p>
                <p style="color: rgb(20, 165, 255)">5%</p>
              </div>
              <div class="processOut">
                <div class="process" style="width: 5%;background: rgb(20, 165, 255);"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="bar">
        <span class="title">停车位数量</span>
        <span class="info">NUMBER OF PARKING SPACES</span>
      </div>
      <div class="stopCarInfo">
        <div class="rows">
          <div class="col">
            <div class="title">总停车位</div>
            <div class="value" style="color: rgba(255,255,255,1)">2000个</div>
          </div>
          <div class="col">
            <div class="title">已用停车位</div>
            <div class="value" style="color: rgba(255,255,255,1)">1500个</div>
          </div>
        </div>
        <div class="rows" style="padding-top: 1rem">
          <div class="col">
            <div class="title">空闲停车位</div>
            <div class="value" style="color: rgba(96,165,250,1)">490个</div>
          </div>
          <div class="col">
            <div class="title">故障车位</div>
            <div class="value" style="color: rgba(245,158,11,1)">10个</div>
          </div>
        </div>
      </div>
      <div class="bar">
        <span class="title">车辆列表</span>
        <span class="info">SURVEILLANCE VIDEO</span>
      </div>
      <div class="table">
        <table class="w-full" cellpadding="5px">
          <thead>
          <tr>
            <th>序号</th>
            <th>车牌</th>
            <th>入场时间</th>
            <th>停放时间</th>
          </tr>
          </thead>
        </table>
      </div>
      <div class="table tableH">
        <table class="w-full" cellpadding="5px">
          <tbody>
          <tr>
            <th>1</th>
            <th>湘C7Z9G0</th>
            <th>16:12</th>
            <th>30分钟</th>
          </tr>
          <tr>
            <th>2</th>
            <th>湘C7Z9G0</th>
            <th>16:12</th>
            <th>30分钟</th>
          </tr>
          <tr>
            <th>3</th>
            <th>湘C7Z9G0</th>
            <th>16:12</th>
            <th>30分钟</th>
          </tr>
          <tr>
            <th>4</th>
            <th>湘C7Z9G0</th>
            <th>16:12</th>
            <th>30分钟</th>
          </tr>
          <tr>
            <th>5</th>
            <th>湘C7Z9G0</th>
            <th>16:12</th>
            <th>30分钟</th>
          </tr>
          <tr>
            <th>6</th>
            <th>湘C7Z9G0</th>
            <th>16:12</th>
            <th>30分钟</th>
          </tr>
          <tr>
            <th>7</th>
            <th>湘C7Z9G0</th>
            <th>16:12</th>
            <th>30分钟</th>
          </tr>
          <tr>
            <th>8</th>
            <th>湘C7Z9G0</th>
            <th>16:12</th>
            <th>30分钟</th>
          </tr>
          <tr>
            <th>9</th>
            <th>湘C7Z9G0</th>
            <th>16:12</th>
            <th>30分钟</th>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="bar">
        <span class="title">设备选择</span>
        <span class="info">DEVICE SELECTION</span>
      </div>
      <div class="rows">
        <div class="col">
          <div class="title">设备总数</div>
          <div class="value" style="color: rgba(255,255,255,1)">258</div>
        </div>
        <div class="col">
          <div class="title">在线数量</div>
          <div class="value" style="color: rgba(255,255,255,1)">248</div>
        </div>
        <div class="col">
          <div class="title">故障数量</div>
          <div class="value" style="color: rgba(245,158,11,1);">10</div>
        </div>
      </div>
      <div class="deviceInfo">
        <div ref="g6-1">

        </div>
        <div ref="g6-2">

        </div>
        <div ref="g6-3">

        </div>
        <div ref="g6-4">

        </div>
        <div ref="g6-5">

        </div>
        <div ref="g6-6">

        </div>
      </div>
      <div class="bar">
        <span class="title">告警通知</span>
        <span class="info">ALERT NOTIFICATION</span>
      </div>
      <div class="warning">
        <vue3-seamless-scroll
            :list="warningData"
            class="seamless-warp"
            :class-option="classOption"
        >
          <div :class="item.info === '发生火灾' ? 'rows cursor' : 'rows'" v-for="(item, index) in warningData" :key="index" @click="createFire(item)">
            <div class="col" :style="`color: ${item.color}`">
              <span class="iconfont icon-jinggao_o"></span>
              <span>{{ item.info }}</span>
            </div>
            <div class="col" style="text-align: right;color: #ffffff">4/2 15:20</div>
          </div>
        </vue3-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
@import "../../assets/iconfont/iconfont.css";

.bimfacemain {
  position: relative;

  .cursor {
    cursor: pointer;
  }

  .mask {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    background: url('../../assets/mask.png') 0 0/100% 100%;
    pointer-events: none;
  }

  .header {
    height: 70px;
    position: absolute;
    top: 0;
    right: 20px;
    left: 0;
    z-index: 9999;
    background-image: url("../../assets/header.png");
    background-repeat: no-repeat;
  }

  .bar {
    margin-top: 3.2rem;
    position: relative;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    &:before {
      left: auto;
      right: 0 !important;
      content: "";
      position: absolute;
      width: 5px;
      height: 2px;
      background: #fff;
      bottom: -2px;
      box-sizing: border-box;
      border: 0 solid #e5e7eb
    }

    &:after {
      content: "";
      position: absolute;
      width: 5px;
      height: 2px;
      background: #fff;
      bottom: -2px;
      left: 0;
      box-sizing: border-box;
      border: 0 solid #e5e7eb;
    }

    & > .title {
      font-size: 1.875rem;
      line-height: 2.25rem;
      font-weight: 900;
      color: #fff;
    }

    & > .info {
      color: #666;
      font-size: .9rem;
      text-transform: uppercase;
      font-weight: 400;
      --tw-text-opacity: 1;
      line-height: 2.1rem;
    }
  }

  .right {
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }

    .deviceInfo {
      display: flex;
      flex-wrap: wrap;
      margin-top: 1rem;
      justify-content: left;
    }

    .warning {
      overflow: auto;
      height: 17rem;

      &::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
    }

    .tableH {
      overflow: auto;
      height: 17rem;

      &::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
    }

    .table {
      .w-full {
        width: 100%;
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse;
        background-color: rgba(5, 57, 83, 1)
      }

      tr {
        color: rgba(255, 255, 255, 1);
        text-align: center;
        margin: 1rem;
        border: 1px solid rgba(2, 172, 255, 1);
        background-color: rgba(10, 85, 122, 1);
      }
    }

    .rows {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;

      .col {
        flex: 1;

        .title {
          color: rgba(255, 255, 255, 1);
          font-size: inherit;
          font-weight: inherit;
        }

        .value {
          font-size: 2.25rem;
          line-height: 2.5rem;
          font-weight: 500;
        }
      }
    }

    z-index: 9999;
    position: absolute;
    top: 80px;
    bottom: 10px;
    right: 5px;
    width: 31.5rem;
    overflow: auto;
  }

  .left {
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }

    z-index: 9999;
    position: absolute;
    top: 80px;
    bottom: 10px;
    left: 5px;
    width: 31.5rem;
    overflow: auto;

    .person {
      .percentage {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        height: 216px;

        .percentageLeft {
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          flex: 1;

          .echartsDiv {
            flex: 1;
          }
        }

        .percentageRight {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .ageInfo {
            .age {
              display: flex;
              justify-content: space-between;
            }

            .processOut {
              border-bottom: 2px solid #e5e7eb;

              .process {
                height: 4px;
                margin: 2px 0;
                border-radius: 2px;
                transition: 3s;
                position: relative;

                &:after {
                  content: "";
                  display: block;
                  background: #fff;
                  height: 5px;
                  width: 2px;
                  position: absolute;
                  right: 0;
                }
              }
            }
          }
        }
      }

      .personList {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;

        .personItem {
          .title {
            color: rgba(255, 255, 255, 1);
            font-size: inherit;
            font-weight: inherit;
          }

          .value {
            font-size: 2.25rem;
            line-height: 2.5rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
          }
        }
      }
    }

    .myEcharts {
      height: 300px;
    }

    .doorMonitor {
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;

      .info {
        width: 11rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .h6 {
          font-size: inherit;
          font-weight: inherit;
          color: rgba(255, 255, 255, 1);
        }

        .value {
          font-size: 2.25rem;
          line-height: 2.5rem;
          font-weight: 500;
        }
      }

      .img {
        width: 15rem;
        height: 11rem;
        background: url("../../assets/img2.png") center/cover;
        position: relative;

        &:after {
          background: url("../../assets/img4.png") center/contain no-repeat;
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }
    }

    .monitor {
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;

      .info {
        width: 11rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .h6 {
          font-size: inherit;
          font-weight: inherit;
          color: rgba(255, 255, 255, 1);
        }

        .value {
          font-size: 2.25rem;
          line-height: 2.5rem;
          font-weight: 500;
        }
      }

      .img {
        width: 15rem;
        height: 11rem;
        background: url("../../assets/img2.png") center/cover;
        position: relative;

        &:after {
          background: url("../../assets/img1.png") center/contain no-repeat;
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }
    }
  }

  .content {
    height: 100%;
  }
}

</style>

<script>
// @ is an alias to /src
import * as echarts from 'echarts'
import G6 from '@antv/g6';
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { defineComponent, ref } from "vue";
export default {
  name: 'Home',
  components: {
    Vue3SeamlessScroll
  },
  setup() {
    const warningData = ref([{
      info: '发生火灾',
      color: 'red'
    }, {
      info: '有人员进入危险区域',
      color: 'red'
    }, {
      info: '六楼应急照明设备发生故障',
      color: 'orange'
    }, {
      info: '发生火灾',
      color: 'red'
    },
      {
        info: '有人员进入危险区域',
        color: 'red'
      },
      {
        info: '六楼应急照明设备发生故障',
        color: 'orange'
      }, {
        info: '有人员进入危险区域',
        color: 'red'
      }, {
        info: '有人员进入危险区域',
        color: 'red'
      }, {
        info: '六楼应急照明设备发生故障',
        color: 'orange'
      }, {
        info: '有人员进入危险区域',
        color: 'red'
      }, {
        info: '六楼应急照明设备发生故障',
        color: 'orange'
      }, {
        info: '有人员进入危险区域',
        color: 'red'
      }, {
        info: '发生火灾',
        color: 'red'
      }])
    return { warningData };
  },
  data() {
    return {
      classOption: {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 43, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000
      },
      addFireEffect: undefined,
    }
  },
  mounted() {
    // this.loadModel();
    this.queryModel();
    this.initEcharts();
    this.initPersonEcharts();
    this.initG6Circle('g6-1', '烟感器');
    this.initG6Circle('g6-2', '应急照明');
    this.initG6Circle('g6-3', '消防栓');
    this.initG6Circle('g6-4', '排烟扇');
    this.initG6Circle('g6-5', '自动喷淋');
    this.initG6Circle('g6-6', '应急广播');
  },
  methods: {
    async queryModel() {
      let rs = await this.$http.post(`/bimface-api/oauth2/token`, null,{
        headers: {'Authorization': 'Basic ' + 'dHJlM1dnS1ZyWGNjdkpwcjBXM0d0U1paMnRVaTR0eWg6eXdaYVo3bjlSUGVscVliWHFyY3lBbmpPaEFDWkxNSVY='}
      });
      if (rs.data.code) {
        let token = rs.data.data.token;
        rs = await this.$http.get(`/bimface-api/view/token?fileId=10000723617376`, {
          headers: {'Authorization': 'bearer ' + token}
        });
        let viewtoken = rs.data.data;
        this.loadModel(viewtoken);
      }
    },
    createFire(item) {
      if ('发生火灾' === item.info) {
        this.addFireEffect();
      }
    },
    initG6Circle(refName, labelName) {
      let g6 = this.$refs[refName];
      const data = {
        // 点集
        nodes: [
          {
            id: 'node1',
            type: 'circle',
            size: 70,
            x: 50,
            y: 45,
            label: labelName,
            style: {
              lineWidth: 3,
              fill: 'rgba(0,0,0,0)',
            },
            labelCfg: {
              style: {
                fill: 'rgba(255,255,255,1)',
                fontSize: 16,
              }
            }
          },
        ]
      };
      const graph = new G6.Graph({
        container: g6, // 指定图画布的容器 id，与第 9 行的容器对应
        // 画布宽高
        width: 105,
        height: 90,
      });
      // 读取数据
      graph.data(data);
      // 渲染图
      graph.render();
    },
    initPersonEcharts() {
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center',
          textStyle: {
            color: '#F8F8FF'
          }
        },
        series: [
          {
            name: '男女占比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 50, name: '男'},
              {value: 50, name: '女'},
            ]
          }
        ]
      };
      let myChart = echarts.init(this.$refs.percentageManEcharts);
      myChart.setOption(option);
    },
    initEcharts() {
      let option = {
        title: {
          text: '',
          subtext: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['进', '出'],
          textStyle: {
            color: '#F8F8FF'
          }
        },
        toolbox: {
          show: false,
          feature: {
            dataView: {show: false, readOnly: false},
            magicType: {show: false, type: ['line', 'bar']},
            restore: {show: false},
            saveAsImage: {show: false}
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: ['2h', '4h', '6h', '8h', '10h', '12h', '14h', '16h', '18h', '20h', '22h', '24h']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '进',
            type: 'bar',
            data: [
              2, 4, 7, 23, 25, 76, 135, 162, 32, 20, 6, 3
            ]
          },
          {
            name: '出',
            type: 'bar',
            data: [
              2, 5, 9, 26, 28, 70, 175, 182, 48, 18, 6, 2
            ]
          }
        ]
      };
      let myChart = echarts.init(this.$refs.echarts);
      myChart.setOption(option);
    },
    async loadModel(viewToken) {
      let app, viewer3D, map, iblManager, model3D, wallEffect, bloomEffect, ringScanEffect, fireEffect,
          isFireEffectAdded = false,
          isRingScanEffectAdded = false,
          extObjMng, planeScanEffect, curveAnimationConfig, curveAnimation,
          path = [], curveIds = [], mapFlag = false, isWallEffectAdded = false;
      let points = [[{"x": -664494.9882926713, "y": 857260.5285264808, "z": -30000.000000000116},
        {"x": -437216.3548445925, "y": 394317.68358424987, "z": -29999.999999999996},
        {"x": -156879.8372170192, "y": -166726.210835705, "z": -30000},
        {"x": -187969.4369607172, "y": -743929.5351851493, "z": -9933.085937499884}
      ], [
        {"x": 692304.3415812136, "y": 866032.4854528737, "z": -3938.4296875},
        {"x": -384641.90203057375, "y": 383631.0822244335, "z": -29999.999999999996},
        {"x": -956907.9191514773, "y": 125815.51708389423, "z": -30000}
      ], [
        {"x": -73614.44606795571, "y": 1099974.2738401138, "z": -30000},
        {"x": 246586.62831748347, "y": 353937.266941525, "z": -30000},
        {"x": 301881.72285440733, "y": 72926.28234204413, "z": -30000.000000000233},
        {"x": 289212.63327101193, "y": 26724.012534296802, "z": -30000},
        {"x": 66041.11837435848, "y": -676811.0633966074, "z": -29999.999999999764}
      ], [
        {"x": -153993.7705334549, "y": -189718.98555572916, "z": -30000},
        {"x": 726841.4893973846, "y": -334432.28335615346, "z": -30000}
      ], [
        {"x": 117678.60487621368, "y": -640838.3908359156, "z": -17796.537528257584},
        {"x": 598104.2977627917, "y": 696671.0078765247, "z": -2481.9335485182237}
      ], [
        {"x": 143539.41088464443, "y": -654605.964915779, "z": -29999.999999999996},
        {"x": 282416.3267222665, "y": -266400.5994557519, "z": -30000}
      ]];
      let loaderConfig = new BimfaceSDKLoaderConfig();
      loaderConfig.viewToken = viewToken;
      BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);
      let domShow = this.$refs.model;
      let that = this;

      function successCallback(viewMetaData) {
        var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
        webAppConfig.Buttons = ["Home", "RectangleSelect", "Walk", "Measure", "Section", "Property", "Setting", "FullScreen"];
        webAppConfig.domElement = domShow;
        app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
        app.addView(viewToken);
        viewer3D = app.getViewer();
        viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, function (objectdata) {
          console.log(JSON.stringify(objectdata))
          console.log(objectdata.objectId);
        })
        viewer3D.render();
        viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
          // 渲染场景
          initIBL();
          viewer3D.zoomToBoundingBox({"min":{"x":-86.13780975341797,"y":347.7019072083428,"z":5.14999771139514},
            "max":{"x":-66.57777404785158,"y":367.14440626821965,"z":20.97369575479138}})
          viewer3D.render();
        });
      };


      function initIBL() {
        // 构造IBL管理器配置项，并指定Viewer、Option参数
        let iblManagerConfig = new Glodon.Bimface.Plugins.IBL.IBLManagerConfig();
        iblManagerConfig.viewer = viewer3D;
        // 设置IBL的图片资源
        iblManagerConfig.style = Glodon.Bimface.Plugins.IBL.IBLStyle.SunsetGrass;
        // 构造IBL管理器，构造完成后，场景背景即发生变化
        iblManager = new Glodon.Bimface.Plugins.IBL.IBLManager(iblManagerConfig);
        iblManager.setStyle(Glodon.Bimface.Plugins.IBL.IBLStyle.LawnScene);
      }

      function failureCallback(error) {
        console.log(error);
      };
    }
  }
}
</script>
